window.onload = function() {
    var selecter_main = document.getElementById('main')
    var selecter_extra = document.getElementById('extra')
    var selecter_side = document.getElementById('side')

    selecter_main.onclick = onSelecterMainClicked
    selecter_extra.onclick = onSelecterExtraClicked
    selecter_side.onclick = onSelecterSideClicked
}

function hideAll() {
    var main_area = document.getElementsByClassName('main')[0]
    var extra_area = document.getElementsByClassName('extra')[0]
    var side_area = document.getElementsByClassName('side')[0]

    main_area.style.display = 'none'
    extra_area.style.display = 'none'
    side_area.style.display = 'none'
}

function onSelecterMainClicked() {
    hideAll()

    var main_area = document.getElementsByClassName('main')[0]
    main_area.style.display = 'block'
}

function onSelecterExtraClicked() {
    hideAll()

    var extra_area = document.getElementsByClassName('extra')[0]
    extra_area.style.display = 'block'
}

function onSelecterSideClicked() {
    hideAll()

    var side_area = document.getElementsByClassName('side')[0]
    side_area.style.display = 'block'
}